﻿<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>bootstrap4 input数值微调插件</title>
	<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
	<style type="text/css">
	body{background: #fff;}
        pre.code {
            padding: 10px;
            background-color: #eee;
            overflow-y: scroll;
        }

        .input-group {
            width: 250px;
        }
    </style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>bootstrap4 input数值微调插件 <span>A Bootstrap 4 / jQuery plugin to create input spinner elements for number input</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<section class="container pt-5">
    <h1>bootstrap-input-spinner</h1>
    <p class="mb-3">
        A Bootstrap 4 / jQuery plugin to create input spinner elements for number input.
    </p>
    <h2>Examples</h2>
    <form>
        <h4>整数</h4>
        <p>
            <input type="number" value="500" min="0" max="1000" step="10"/>
        </p>
        <pre class="code">&lt;input type="number" value="500" min="0" max="1000" step="10"/&gt;</pre>
        <h4>浮点数</h4>
        <p>
            <input type="number" value="4.5" data-decimals="2" min="0" max="9" step="0.1"/>
        </p>
        <pre class="code">&lt;input type="number" value="4.5" data-decimals="2" min="0" max="9" step="0.1"/&gt;</pre>
        <h4>输入框尺寸</h4>
        <p>You can set the group css class via configuration.</p>
        <p>
            Small
            <input class="small" value="4.5" data-decimals="2" min="0" max="9" step="0.1"/>
        </p>
        <pre class="code">$("input.small").InputSpinner({groupClass: "input-group-sm"})</pre>
        <p>
            Large
            <input class="large" value="4.5" data-decimals="2" min="0" max="9" step="0.1"/>
        </p>
        <pre class="code">$("input.large").InputSpinner({groupClass: "input-group-lg"})</pre>
        <h4>处理 `change` 和 `input` 事件</h4>
        <p>
            <input type="number" id="handleChange" value="2500" min="0" max="5000" step="10"/>
        </p>
        <p>
            Value: <span id="valueOutput"></span>
        </p>
        <script>
            var changedElement = document.getElementById("handleChange")
            var outputElement = document.getElementById("valueOutput")
            changedElement.addEventListener("change", function (event) {
                valueOutput.innerHTML = changedElement.value
            })
        </script>
        <pre class="code">changedElement.addEventListener("change", function(event) { // works also with `ìnput`
    valueOutput.innerHTML = changedElement.value
})</pre>
        <h4>通过编程修改值</h4>
        <p>
            Net
            <input type="number" id="inputNet" value="100" min="0" max="10000" step="0.01" data-decimals="2"/>
        </p>
        <p>
            Gross (+19%)
            <input type="number" id="inputGross" value="100" min="0" max="10000" step="0.01" data-decimals="2"/>
        </p>
        <pre class="code">inputNet.addEventListener("change", function(event) {
    inputGross.setValue(inputNet.value * 1.19) // use `setValue` instead of `value=`
})
inputGross.addEventListener("change", function(event) {
    inputNet.setValue(inputGross.value / 1.19)
})</pre>
        <script>
            var inputNet = document.getElementById("inputNet")
            var inputGross = document.getElementById("inputGross")
            inputNet.addEventListener("change", function (event) {
                inputGross.setValue(inputNet.value * 1.19) // use `setValue` instead of `value=`
            })
            inputGross.addEventListener("change", function (event) {
                inputNet.setValue(inputGross.value / 1.19)
            })
        </script>
        <h4>Classes 'is-invalid' and 'is-valid'; properties 'required' and 'placeholder'</h4>
        <p>To enable server-side validation, the classes 'is-invalid' and 'is-valid' of the original input are copied to
            the created input element.
            Also 'required' and 'placeholder' are copied.</p>
        <p>
            <input placeholder="Enter a number" required type="number" value="" min="-100" max="100"/>
        </p>
        <pre class="code">&lt;input <strong>placeholder</strong>="Enter a number" <strong>required</strong> type="number" value="" min="-100" max="100"/&gt;</pre>
        <input type="submit" class="btn btn-primary mb-4" value="Submit to test empty input"/>
    </form>
    <h4>Script</h4>
    <p>
        This script enables the InputSpinner for all inputs with type='number' on this page.
        No extra css needed, just Bootstrap 4.
    </p>
    <pre class="code">&lt;script&gt
    $("input[type='number']").InputSpinner()
&lt;/script&gt;</pre>
    <br/><br/>
</section>

	</div>
	
	<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="./js/InputSpinner.js"></script>
	<script>
	    $("input[type='number']").InputSpinner()
	    $("input.small").InputSpinner({groupClass: "input-group-sm"})
	    $("input.large").InputSpinner({groupClass: "input-group-lg"})
	</script>
</body>
</html>